<docs>
  ## select 组件
</docs>
<template>
<div class="form-group border-b" @click="$emit('click', $event)">
  <label class="input-label" for="">{{label}}</label>
  <div class="form-control-wrap">
    <input v-model="selectValue" class="checked" placeholder="请选择亲属关系" @focus="resetValid"></input>
    <select dir="rtl" v-model="selectValue"
      @change="resetValid">
      <option disabled value="">请选择</option>
      <option v-for="(item, i) in list" :key="i"
        :value="getId(item)">{{getName(item)}}</option>
    </select>
  </div>
</div>
</template>
<script>
import { mixinValid } from 'common/mixins/mixins';

export default {
  name: 'co-selectcheck',
  props: {
    label: String,
    prop: String,
    value: String,
    rules: Object,
    list: Array,
    attrid:{
      type:String,
      default:'id'
    },
    attrname:{
      type:String,
      default:'mc'
    }
  },
  data() {
    return {
      selectValue: ''
    };
  },
  methods:{
    getId(item){
      return item[this.attrid]
    },
    getName(item){
      return item[this.attrname]
    }
  },
  watch: {
    value(val) {
      this.selectValue = val;
    },
    selectValue(val) {
      this.$emit('input', val);
      this.$nextTick(() => {
        this.validItem();
      });
    },
    list() {
      this.$nextTick(() => {
        this.selectValue = this.value;
      });
    }
  },
};
</script>
<style scoped lang="scss">
@import '~common/scss/variable.scss';
  select {
    width: 100%;
    direction: rtl;
  }
  select option {
    width: 100%;
      // direction: ltr;
      font-size: 0.0098rem;
  }
</style>
